﻿@model eBusiness.Models.Category
@{
    ViewBag.Title = "Create Category";
    Layout = "../Shared/_Layout.cshtml";
}
<h2>
    Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".date-picker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm-dd-yy',
            showButtonPanel: false,
            gotoCurrent: false
        });

        if ($("#IsMenu").is(":checked")) {
            $("#isMenuDateRow").show();
        } else {
            $("#isMenuDateRow").hide();
        }
        $("#IsMenu").change(function (e) {
            if ($("#IsMenu").is(":checked")) {
                $("#isMenuDateRow").show();
            } else {
                $("#isMenuDateRow").hide();
            }
        });
        
        $('#ProductThumbImageUploader').change(function () {
            $("#tempThumbFile").html("");
            for (var i = 0; i < this.files.length; i++) {
                if (this.files && this.files[i]) {
                    var reader = new window.FileReader();
                    reader.onload = function (e) {
                        $("#tempThumbFile").append('<div style="float:left; max-width:120px; height:82px; overflow:hidden; margin-left:10px;"><img style="height:80px; border:solid 1px #80ABD5" src="' + e.target.result + '" alt="" /></div>');
                    };
                    reader.readAsDataURL(this.files[i]);
                }
            }
        });
    });
</script>
@using (Html.BeginForm("Create", "Categories", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(false)
    <fieldset>
        <legend>Category</legend>
        <table class="detailsTables">
            <tr>
                <td class="editor-label">
                    @Html.LabelFor(model => model.Name)
                </td>
                <td class="editor-field">
                    @Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name,"*")
                </td>
            </tr>
            <tr>
                <td class="editor-label">
                    @Html.LabelFor(model => model.ParentID)
                </td>
                <td class="editor-field">
                    @Html.DropDownListFor(model => model.ParentID, (SelectList)@ViewBag.Parents, "")
                        @Html.ValidationMessageFor(model => model.ParentID, "*")
                </td>
            </tr>
            <tr>
                <td class="editor-label">
                    @Html.LabelFor(model => model.Icon)
                </td>
                <td class="editor-field"  colspan="3">
                    <div class="editor-field">
                        <input type="file" id="ProductThumbImageUploader" name="file" style="width: 100%" />
                        <div id="tempThumbFile" style="margin-top: 10px;">
                        </div>
                        <div class="clearboth">
                            <span></span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="editor-label">
                    @Html.LabelFor(model => model.Description)
                </td>
                <td class="editor-field"  colspan="3">
                    @Html.TextAreaFor(model => model.Description, new {@style = "width:92%"})
                    @Html.ValidationMessageFor(model => model.Description, "*")
                </td>
            </tr>
            <tr>
                <td class="editor-label">
                    @Html.LabelFor(model => model.IsMenu)
                </td>
                <td class="editor-field">
                    @Html.EditorFor(model => model.IsMenu)
                    @Html.ValidationMessageFor(model => model.IsMenu, "*")
                </td>
            </tr>
            <tr id="isMenuDateRow">
                <td class="editor-label">
                    @Html.LabelFor(model => model.IsMenuStartDate)
                </td>
                <td class="editor-field">
                    @Html.TextBoxFor(model => model.IsMenuStartDate, new { @class = "date-picker" })
                    @Html.ValidationMessageFor(model => model.IsMenuStartDate, "*")
                </td>
                <td class="editor-label">
                    @Html.LabelFor(model => model.IsMenuEndDate)
                </td>
                <td class="editor-field">
                    @Html.TextBoxFor(model => model.IsMenuEndDate, new { @class = "date-picker" })
                    @Html.ValidationMessageFor(model => model.IsMenuEndDate, "*")
                </td>
            </tr>
        </table>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
